<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="Keywords" content="Sunny">
    <meta name="Description" content="Sunny">
    <link rel="stylesheet" href="/css/base.css">
    <link rel="stylesheet" href="/css/iconfont.css">
    <link rel="stylesheet" href="/css/reg.css">
    <style>
        .login-message {
            display: block;
            line-height: 30px;
            font-size: 14px;
            color: red;
            text-align: left;
            width: 340px;
            margin: 0 auto;
        }

        .message-error {
            color: #ea5d5f;
            font-size: 12px;
            left: 0;
        }
    </style>

    <script type="text/javascript">
        function changeCaptcha() {
            let captchaImg = document.getElementById('captchaImg');
            captchaImg.src = "/oauth/captcha.jpg?t=" + new Date().getTime();
        }
    </script>
</head>
<body>
<div id="ajax-hook"></div>
<div class="wrap">
    <div class="wpn">
        <div class="form-data pos">
            <a href=""><img src="/img/logo.png" class="head-logo"></a>
            <div class="change-login">
                <p name="account" th:class="${type} == 'account' ? 'account_number on' : 'account_number'">账号登录</p>
                <p name="mobile" th:class="${type} == 'mobile' ? 'message on' : 'message'">短信登录</p>
            </div>
            <div class="login-message">
                <span class="message-error" th:text="${errorMsg}"></span>
            </div>
            <div th:class="${type} == 'account' ? 'form1' : 'form1 hide'">
                <!--<form id="accountLogin" action="/user/login" method="post">-->
                    <p class="p-input pos">
                        <input type="text" id="num" name="username" th:value="${username}" placeholder="请输入用户名/手机号"
                               maxlength="30">
                        <span class="tel-warn num-err hide"><em>账号或密码错误，请重新输入</em><i class="icon-warn"></i></span>
                    </p>
                    <p class="p-input pos">
                        <input type="password" id="pass" name="password" maxlength="30" placeholder="请输入密码">
                        <span class="tel-warn pass-err hide"><em>账号或密码错误，请重新输入</em><i class="icon-warn"></i></span>
                    </p>
                    <p th:class="${enableCaptcha} ? 'p-input pos code' : 'p-input pos code hide'">
                        <input type="text" id="veri" name="verifyCode" maxlength="6" placeholder="请输入验证码">
                        <img id="captchaImg" onclick="changeCaptcha()" title="点击刷新验证码" src="/oauth/captcha.jpg"/>
                        <span class="tel-warn img-err hide"><em>账号或密码错误，请重新输入</em><i class="icon-warn"></i></span>
                    </p>
                <!--</form>-->
            </div>
            <div th:class="${type} == 'mobile' ? 'form2' : 'form2 hide'">
                <form id="smsLogin" action="/authentication/mobile" method="post">
                    <p class="p-input pos">
                        <input type="number" id="num2" name="mobile" maxlength="11" th:value="${username}"
                               placeholder="手机号">
                        <span class="tel-warn num2-err hide"><em>账号或密码错误</em><i class="icon-warn"></i></span>
                    </p>
                    <p class="p-input pos">
                        <input type="number" id="veri-code" name="captcha" maxlength="6" placeholder="输入验证码"/>
                        <input type="hidden" id="smsCaptchaKey" name="captchaKey">
                        <a href="javascript:void(0);" class="send">发送验证码</a>
                        <span class="time hide"><em>60</em>s</span>
                        <span class="tel-warn error hide">验证码错误</span>
                    </p>
                </form>
            </div>
            <div class="r-forget cl">
                <a href="/register.html" class="z">账号注册</a>
                <a href="/getpass.html" class="y">忘记密码</a>
            </div>
            <button class="lang-btn off log-btn">登录</button>
            <div class="third-party">
                <a href="/openid/qq" class="log-qq icon-qq-round"></a>
                <a href="/openid/wechat" class="log-qq icon-weixin"></a>
                <a href="#" class="log-qq icon-sina1"></a>
            </div>
            <p class="right">Powered by Lmaye © 2020</p>
        </div>
    </div>
</div>
<script src="/js/jquery.js"></script>
<script src="/js/agree.js"></script>
<script src="/js/login.js"></script>
</body>
</html>